
<template>
  <div class="Main">
    <div class="MainTitle">展示框架列表</div>
    <div class="MianContent">
      <div class="MainTopAction">
        <!-- <div class="flex align-center">
                    <a-button style="margin-right:10px;" icon="plus" type="primary" @click="addBrand">新增数据源</a-button>
                </div>
                <div class="flex align-center">
                    <a-input v-model="keyword" allowClear @change="InputChange" style="width: 300px;" placeholder="请输入信息查询" />
                    <a-button class="ml-10" type="primary" @click="SeachKeyword">搜索</a-button>
                </div> -->
      </div>

      <div class="tableBoxWrap">
        <div class="tableBox" v-for="(item,index) in listData" :key="index">
          <h3>{{item.name}}</h3>
          <img :src="item.logo" alt="">
          <a-button type="primary" @click="toEdit(item)">编辑</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from "vuex";
import { showErrors, showError, showSuccess } from "@/utils/showMsg";
import Pagination from "@/components/common/pagination.vue";
import { DataSourceList } from "@/views/Columns/DataSource";
import {
  Getcamlayoutlist,
  AddDataSource,
  UpdateDataSource,
  BrandStatus,
  DeleteDataSource,
} from "@/api/api.js";
import env from "@/config/env";
import request from "@/utils/request";
import Vue from "vue";

export default {
  name: "list",
  components: {
    Pagination,
  },
  data() {
    return {
      total: 0, //定义初始有多少条数据
      pageno: 1, //默认第几页
      pagesize: 10, //一页显示多少条数据
      keyword: "",
      listData:[]
    };
  },
  computed: {
    ...mapState({}),
  },
  created() {},
  mounted() {
    let that = this;
    that.GetList();
  },
  methods: {
    // 获取数据列表API
    async GetList() {
      let that = this;
      let params = {
        page: that.pageno,
        pageSize: that.pagesize,
      };
      const res = await Getcamlayoutlist(params);
      if (res.data.code == 0) {
        // console.log(res.data);
        const data = res.data.data;
        if (data.list.length > 0) {
          data.list.forEach((item, index) => {
            item.key = item.ID;
            item.CreatedAt = new Date(item.CreatedAt).toLocaleString(); //地区时间转换
            // item.create_time = that.$moment(item.create_time * 1000).format('YYYY-MM-DD  HH:mm:ss'); //时间戳转换成时间
          });
        }
        // console.log(data);
        that.total = data.total;
        that.listData = data.list;
      } else {
        showError(res.data.msg);
      }
    },

    // 进入框架编辑
    toEdit(row){
        const that = this;
        that.$router.push({name:'FrameManageDetail',query:{id:row.ID,name:row.name,logo:row.logo}})
    }
  },
};
</script>

<style lang="less">
.Main {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;

  .MainTitle {
    font-size: 24px;
    color: #333;
    margin: 10px 20px;
    position: relative;
  }

  .MainTitle:before {
    content: "";
    width: 40px;
    height: 12px;
    background: linear-gradient(
      270deg,
      rgba(0, 158, 238, 0) 0%,
      rgba(221, 169, 85, 0.3) 100%
    );
    position: absolute;
    bottom: 2px;
    left: 0;
  }

  .MianContent {
    padding: 10px 20px 20px 20px;

    .MainTopAction {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .TabsItem {
      padding: 10px 0;
      width: 70px;
      position: relative;
      margin-right: 24px;
      text-align: center;
      cursor: pointer;
      margin-bottom: 20px;
      color: #000;
    }

    .TabsIndex {
      color: #dda955;
    }

    .TabsIndex::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 0%);
      width: 50px;
      height: 2px;
      background-color: #dda955;
    }
    .tableBoxWrap {
      width: 100%;
      // height: 500px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 0.5rem;
    }
    .tableBox {
      margin-bottom: 50px;
      text-align: center;
      width: 400px;
      img{
        width: 100%;
        height: 300px;
      }
    }
  }
}
</style>